<template>
    <router-link class="DayList" :to="{path:'/listNR', query:{caricatureId:dataStr.caricatureId} }"
        :data-caricatureId="dataStr.caricatureId">
        <div class="box1" :class="!is?'pa':''">
            <div class="one" v-if="isShow==1 && is">
                <img :src="str[0]">
            </div>
            <div class="two" :class="!is?'pa':''" v-if="isShow==2 && is">
                <img :src="str[0]">
                <img :src="str[1]">
            </div>
        </div>
        <div class="box2">
            <img :src="dataStr.url" v-if="is">
        </div>
        <div class="box3" v-if="is">
            <div class="up">
                <p>{{dataStr.name}}</p>
            </div>
            <div class="down">
                <div class="fl">
                    <p>{{dataStr.zhouzhe}}</p>
                    <p>{{type}}</p>
                    <p v-if="dataStr.trend == 2">更新至{{dataStr.hua}}话</p>
                    <p v-if="dataStr.trend == 1">共{{dataStr.hua}}话</p>
                </div>
                <div class="fr">
                    <img v-if="dataStr.state == 0" src="../assets/public/ping.png">
                    <img v-if="dataStr.state == 2" src="../assets/public/up.png">
                    <img v-if="dataStr.state == 1" src="../assets/public/down.png">
                </div>
            </div>
        </div>
    </router-link>
</template>
  
<script>
export default {
    name: 'DayList',
    props: ['dataStr', 'obj',],
    data() {
        return {
            isShow: 1,
            str: [],
            is: false
        }
    },
    methods: {
        list() {
            let url = []
            if (this.dataStr.id == 1) {
                url.push(this.obj[10].url)
                this.str = url
            } else if (this.dataStr.id < 4) {
                url.push(this.obj[this.dataStr.id].url)
                this.str = url
            } else if (this.dataStr.id >= 4 && this.dataStr.id < 10) {
                url.push(this.obj[0].url)
                url.push(this.obj[this.dataStr.id].url)
                this.str = url
                this.isShow = 2
            } else if (this.dataStr.id >= 10) {
                let str = this.dataStr.id + ''
                let arr = str.split('')
                let sum1 = arr[0]
                let sum2 = arr[1]
                url.push(this.obj[sum1].url)
                url.push(this.obj[sum2].url)
                this.str = url
                this.isShow = 2
            }
        }
    },
    computed: {
        type() {
            let type = this.dataStr.type
            let str = ''
            if (type == '001') {
                return str = '热血'
            } else if (type == '002') {
                return str = '都市'
            } else if (type == '003') {
                return str = '奇幻'
            } else if (type == '004') {
                return str = '游戏电竞'
            } else if (type == '005') {
                return str = '悬疑灵异'
            } else if (type == '006') {
                return str = '西幻'
            } else if (type == '007') {
                return str = '都市'
            } else if (type == '008') {
                return str = '玄幻'
            } else if (type == '009') {
                return str = '悬疑'
            } else if (type == '010') {
                return str = '历史'
            } else if (type == '011') {
                return str = '武侠仙侠'
            } else if (type == '012') {
                return str = '架空'
            } else if (type == '013') {
                return str = '青春'
            } else if (type == '014') {
                return str = '现代'
            } else if (type == '015') {
                return str = '正能量'
            } else if (type == '016') {
                return str = '科幻'
            }
        }
    },
    mounted() {
        this.list()
        this.is = true
    }
}
</script>

<style lang="less" scoped>
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.DayList {
    display: flex;
    margin-bottom: 5.3333vw;
    height: 36.2667vw;
    color: black;
    font-size: 4.9333vw;

    .pa {
        padding-right: 10.1333vw;
    }

    .box1 {
        margin-left: 3.4667vw;
        margin-top: -1.3333vw;
        height: 100%;

        .one {
            img {
                width: 10.1333vw;
                height: 100%;
            }
        }

        .two {
            display: flex;
            height: 7.4667vw;

            img {
                width: auto;
                height: 100%;
            }
        }

    }

    .box2 {
        width: 27.4667vw;
        height: auto;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .box3 {
        position: relative;
        height: 100%;
        margin-left: 1.3333vw;

        p {
            width: 49.3333vw;
        }

        .up {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            height: 12.2667vw;
        }

        .down {
            position: absolute;
            bottom: 0;
            display: flex;
            margin-top: 7.5667vw;
            justify-content: space-between;

            p {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .fl {
                font-size: 3.2vw;
                color: #91969b;
                line-height: 5.8933vw;
                padding-right: 2.6667vw;
            }

            .fr {
                position: absolute;
                bottom: 0;
                right: 0;
                width: 6.4vw;
                height: 6.4vw;


                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
}
</style>